﻿@page "/linear-gauge/tooltip"

@using Syncfusion.Blazor.LinearGauge
@using Newtonsoft.Json;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the tooltip for pointer in linear gauge.</p>
</SampleDescription>
<ActionDescription>
   <p>This sample demonstrates the measuring scale by using the linear gauge. Tooltip is used to track the pointer value closer to the current mouse position or touch contact. You can show the tooltip for an individual marker or bar pointer by hover or tap on the pointer in touch-enabled devices.</p>
   <br><p>More information about tooltip can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/linear-gauge/user-interaction/?no-cache=1#tooltip'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfLinearGauge Orientation="Orientation.Horizontal">
        <LinearGaugeEvents AxisLabelRendering="AxisLabel"/>
        <LinearGaugeContainer Width="140">
            <LinearGaugeContainerBorder Width="2" Color="#a6a6a6"/>
        </LinearGaugeContainer>
        <LinearGaugeTooltipSettings Enable="true" ShowAtMousePosition="true"/>
        <LinearGaugeAnnotations>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="5.4" X="35" Y="-58" ZIndex="1">
                <ContentTemplate>
                    <div><h1 class="annotationText">Inches</h1></div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
            <LinearGaugeAnnotation AxisIndex="1" AxisValue="16.5" X="50" Y="52" ZIndex="1">
                <ContentTemplate>
                    <div><h1 class="annotationText">Centimeters</h1></div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
        </LinearGaugeAnnotations>
        <LinearGaugeAxes>
            <LinearGaugeAxis Maximum="@LinearOneMaximum" Minimum="@LinearOneMinimum">
                <LinearGaugeLine Offset="140"/>
                <LinearGaugeMajorTicks Color="#9E9E9E" Interval="1" Height="20"/>
                <LinearGaugeMinorTicks Color="#9E9E9E" Interval="0.2" Height="10"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="5.4" Offset="15" Type="Point.Bar" Color="#ff66b3"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
            <LinearGaugeAxis OpposedPosition="true" Maximum="@LinearTwoMaximum" Minimum="@LinearTwoMinimum">
                <LinearGaugeLine Offset="-140"/>
                <LinearGaugeMajorTicks Color="#9E9E9E" Interval="1" Height="20"/>
                <LinearGaugeMinorTicks Color="#9E9E9E" Interval="0.2" Height="10"/>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="16.5" Offset="-15" Type="Point.Bar" Color="#4d94ff"/>
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
</div>
<style>
    .annotationText{
        font-size:15px;
        color: #686868;
        margin-top: -6px
    }
    </style>
@code {
    public double LinearOneMinimum = 0;
    public double LinearOneMaximum = 10;
    public double LinearTwoMinimum = 25;
    public double LinearTwoMaximum = 0;
    public void AxisLabel(AxisLabelRenderEventArgs args) {
        if (this.LinearOneMinimum == args.AxisValue  || this.LinearTwoMaximum == args.AxisValue  ||
            this.LinearOneMaximum == args.AxisValue  || this.LinearTwoMinimum == args.AxisValue ) {
            args.Text = "";
        }
        this.StateHasChanged();
    }
}